<template>
  <div class="legend" :style="{ left, bottom }">
    <img class="legendIcon" :class="{ greyIcon: !state.isShowLegendList }" src="./icon.png" @click="handleClickShowLegend" />
    <div class="legendListBox" v-show="state.isShowLegendList">
      <div class="title">
        <h3><img src="./icon.png" />图例</h3>
      </div>
      <div class="legendWwrapper" v-for="(item, index) in state.legendData" :key="index">
        <h3 class="titleItem">{{item.title}}</h3>
        <ul class="legendList">
          <li
            v-for="(child, i) in item.data"
            :class="{ isShow: !child.status }"
            :key="i"
            @click.stop="handleClickLegendItem(child)"
          >
            <img :src="child.icon" alt="图标" />
            <span>{{ child.name }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, onMounted } from 'vue';
  import { setLayerVisible } from 'gmap-ol';
  import { getGlobalMap } from '@/components/GlobalMap';

  defineOptions({ name: 'LegendPage' });
  const emit = defineEmits(['change-legend-data']);

  const props = defineProps({
    left: {
      type: String,
      default: '-50px',
    },
    bottom: {
      type: String,
      default: '0',
    },
    data: {
      type: [Number, Array, String] as PropType<string | string[]>,
      default: '',
    },
  });

  const state = reactive({
    isShowLegendList: false,
    legendData: [...props.data],
  });

  const handleClickShowLegend = () => {
    state.isShowLegendList = !state.isShowLegendList
  }

  // 点击图例icon
  const handleClickLegendItem = (item) => {
    console.log('---------item',item);
    const dataArr = state.legendData;
    const legendData = dataArr.reduce((acc, curr) => {
      return acc.concat(curr.data);
    }, []);
    for (let i = 0; i < legendData.length; i++) {
      if (legendData[i].name === item.name) {
        const status = !legendData[i].status;
        legendData[i].status = status;
      }
    }

    // 遍历legendData数组，赋值状态
    dataArr.forEach((legendItem) => {
      legendItem.data.forEach((item) => {
        const foundItem = legendData.find((dataItem) => dataItem.name === item.name);
        if (foundItem) {
          item.status = foundItem.status;
        }
      });
    });
    emit('change-legend-data', legendData);
    changeLegendStatus(legendData);
  };

  const changeLegendStatus = (legendData) => {
    const olMap = getGlobalMap();
    for (let i = 0; i < legendData.length; i++) {
      const type = legendData[i].type;
      const status = legendData[i].status;
      change3DPopupOverlayStatus(type, status);
      if (olMap) {
        setLayerVisible(olMap, type, status);
      }
    }
  };

  // 改变三维站点显示隐藏
  const change3DPopupOverlayStatus = (type, status) => {
    const nodeList = document.querySelectorAll(`.${type}-PopupOverlay`);
    nodeList.forEach((element) => {
      if (status) {
        element.style.display = 'block';
      } else {
        element.style.display = 'none';
      }
    });
  };

  onMounted(() => {
    changeLegendStatus(state.legendData);
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .legend {
    width: 40px;
    height: 40px;
    background: rgba(251, 252, 255, 1);
    box-shadow: 0px 4px 6px 0px #03225917;
    border-radius: 6px;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    &:hover, &:active {
      // background: #e8fff4;
      border: 1px solid #b9e9d3;
    }
    img.legendIcon {
      width: 24px;
      height: 25px;
      cursor: pointer;
    }
    .greyIcon {
      filter: grayscale(100%);
    }
    .legendListBox {
      position: absolute;
      right: 50px;
      bottom: 0;
      width: 220px;
      background: rgba(251, 252, 255, 1);
      box-shadow: 0px 4px 6px 0px #03225917;
      border-radius: 6px;
      border: 1px solid #fff;
      padding: 2px 10px 10px 10px;
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 32px;
        border-bottom: 1px solid #9eceff;
        margin-bottom: 10px;
        h3 {
          display: flex;
          align-items: center;
          color: #409fff;
          font-size: 15px;
          img {
            width: 14px;
            margin-right: 6px;
            opacity: 0.9;
          }
        }
        span {
          color: #81d9b2;
          cursor: pointer;
          font-size: 12px;
          &:hover {
            color: #409fff;
          }
        }
      }
      .legendWwrapper {
        position: relative;
        margin-top: 18px;
        .titleItem {
          position: absolute;
          top: -12px;
          left: 50%;
          transform: translateX(-50%);
          background: #fbfcff;
          color: #409fff;
          padding: 0 8px 0 8px;
          border: 1px dashed #9eceff;
          line-height: 168x;
          border-radius: 2px;
        }
      }
      ul.legendList {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-row-gap: 8px;
        grid-column-gap: 6px;
        border: 1px dashed #9eceff;
        border-radius: 2px;
        padding: 14px 10px 10px 10px;
        li {
          display: flex;
          align-items: center;
          cursor: pointer;
          img {
            margin-right: 6px;
            max-height: 20px;
          }
        }
        .isShow {
          filter: grayscale(100%) !important;
          opacity: 0.7 !important;
        }
      }
    }
  }
</style>
